<template>
	<view class="Documents-info">
		<!-- <ordertoptitle :title="title"></ordertoptitle> -->
		<view class="info-content">
			<view class="b-info">
				<DocumentsInfoImg :orderInfoData="orderInfos"
							:customer_info="customer_info"
							:address="address"
							@showCustmInfo="showCustmInfo">
				</DocumentsInfoImg>
				<view class="overflow-box">
					<DocumentsInfoList @showDocumentInfo="showDocumentInfo"></DocumentsInfoList>
				</view>
				<DocumentsFixedBottom></DocumentsFixedBottom>
			</view>
			<view class="c-info" v-show="showBillsInfo">
				<DocumentsInfo @showDocumentInfo="showDocumentInfo">
				</DocumentsInfo>
			</view>
			<view class="c-info" v-show="showInfo">
				<customerInfo :orderInfoData="orderInfos"
					:address="address"
					:customer_info="customer_info"
					@showCustmInfo="showCustmInfo">
				</customerInfo>
			</view>
		</view>
		
	</view>
</template>

<script>
	import ordertoptitle from '../bills/OrderTopTitle.vue';
	import DocumentsInfoImg from './DocumentsInfoImg.vue';
	import DocumentsInfoList from './DocumentsInfoList.vue';
	import DocumentsFixedBottom from './DocumentsFixedBottom.vue';
	import DocumentsInfo from './DocumentsInfo.vue';
	import customerInfo from './DocumentsCustomerInfo.vue';
	export default {
		components : { ordertoptitle , DocumentsInfoImg , DocumentsInfoList , DocumentsFixedBottom , DocumentsInfo , customerInfo},
		data() {
			return {
				title : "开单明细",
				showInfo:false,
				customer_info:{},
				address:{},
				orderInfos:{},
				
				showBillsInfo:false,
			};
		},
		created() {
			
		},
		methods:{
			/***关闭客户详情**/
			showCustmInfo(value)
			{
				console.log("点击产品详情按钮 出发事件=============>",value);
				this.showInfo = value;
				if(this.showBillsInfo)
					this.showBillsInfo = !this.showBillsInfo;
			},
			
			showDocumentInfo(value)
			{
				console.log("点击产品详情按钮 出发事件=============>",value);
				this.showBillsInfo = value;
				if(this.showInfo)
					this.showInfo = !this.showInfo;
			}
		},
	}
</script>
<style lang="scss">
	.Documents-info
	{
		flex: 1;
		margin-left: 417px;
		height: 100vh;
		background-color: #FFF;
		// overflow-x: hidden;
		.overflow-box
		{
			// margin-top: 40px;
			overflow-y:auto;
			height: calc(100vh - 171px);
			button
			{
				margin: 10px 0;
				background: #007AFF;
				color: #FFF;
				font-size: 20px;
			}
		}
		.overflow-box::-webkit-scrollbar {/*滚动条整体样式*/
		    width: 4px;     /*高宽分别对应横竖滚动条的尺寸*/
		    height: 0px;
		}
		.overflow-box::-webkit-scrollbar-thumb {/*滚动条里面小方块*/
			border-radius: 10px;
			-webkit-box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.1);
			background: #ccc;//rgba(0, 0, 0, 0.0);
			scrollbar-arrow-color: red;
		}
		.overflow-box::-webkit-scrollbar-track {/*滚动条里面轨道*/
			-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0);
			border-radius: 0;
			background: rgba(0,0,0,0);
		}
		.info-content
		{
			display: flex;
			// align-items: center;
			// justify-content: flex-start;
		}
		.b-info
		{
			// padding-right: 310px;
			// margin-right: 310px;
			width: 100%;
			border-right: 1px solid #ECECEC;
			background: #fff;
		}
		
		.c-info
		{
			// width: 310px;
			// height: 100%;
		}
	}
</style>